<!DOCTYPE html>
<html lang="en" class="app">
<head>
  <meta charset="utf-8" />
  <title>Musik | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="css/animate.css" type="text/css" />
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="css/font.css" type="text/css" />
  <link rel="stylesheet" href="css/app.css" type="text/css" />
  <!--[if lt IE 9]>
  <script src="js/ie/html5shiv.js"></script>
  <script src="js/ie/respond.min.js"></script>
  <script src="js/ie/excanvas.js"></script>
  <![endif]-->
</head>
<style>
  .most-new{
    color: black;font-size: 20px;background-color: #1ab667;
  }
  .choice_all{
    color: black;font-size: 18px;background-color: #1ab667;
  }
  .album_area_bg{
    border: solid 1px grey;background-color: pink ;width: 50px;text-indent: 3px;font-size: 18px;
    float: left;list-style: none;margin:2% 3% 2% 5%;
  }
  .album_area_choice_bg{
    border: solid 1px grey;background-color: pink ;width: 80px;font-size: 18px;
    float: left;list-style: none;font-size: 18px;
  }
  .album_area{
    float: left;list-style: none;margin:2% 3% 2% 5%;font-size: 18px;
  }
  .recommand{
    color: black;font-size: 18px;background-color: #1ab667;
  }
  .album_area:hover,.album_area_choice:hover{
    color: #0ec20d;
  }
  .album_area_choice{
    float: left;list-style: none;margin:0% 2% 2% 1%;font-size: 18px;
  }
  .hot_new{
    font-size:20px;float: left;border: solid 1px grey;border-collapse: collapse;
    width: 70px;text-align:center;
  }
  .hot_new_bg{
    font-size:20px;float: left;border: solid 1px grey;border-collapse: collapse;
    width: 70px;text-align:center;background-color: #0ba60a;
  }
</style>

<section class="vbox">
  <header class="bg-white-only header header-md navbar navbar-fixed-top-xs">
    <div class="navbar-header aside bg-primary nav-xs">
      <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open" data-target="#nav,html">
        <i class="icon-list"></i>
      </a>
      <a href="index.html" class="navbar-brand text-lt">
        <i class="icon-earphones"></i>
        <img src="images/logo.png" alt="." class="hide">
        <span class="hidden-nav-xs m-l-sm">Musik</span>
      </a>
      <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">
        <i class="icon-settings"></i>
      </a>
    </div>      <ul class="nav navbar-nav hidden-xs">
    <li>
      <a href="#nav,.navbar-header" data-toggle="class:nav-xs,nav-xs" class="text-muted">
        <i class="fa fa-indent text"></i>
        <i class="fa fa-dedent text-active"></i>
      </a>
    </li>
  </ul>
    <form class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search">
      <div class="form-group">
        <div class="input-group">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
            </span>
          <input type="text" class="form-control input-sm no-border rounded" placeholder="Search songs, albums...">
        </div>
      </div>
    </form>
    <div style="float: left;font-size: 24px;font-weight: bolder; margin-left:14%;margin-top: 1%">
      <a href="genres.html" style="display:inline-block;width:75px; margin-left:20px;">歌手</a>
      <a href="#" style="display:inline-block;width:75px; margin-left:30px;">专辑</a>
      <a href="#" style="display:inline-block;width:120px; margin-left:30px;">分类歌单</a>
      <a href="#" style="display:inline-block;width:100px; margin-left:30px;">排行榜</a>
      <a href="#" style="display:inline-block;width:75px; margin-left:30px;">用户</a>
      <a href="javascript:void(0);" onclick="show()" style="display:inline-block;width:75px; margin-left:200px;">登录</a>
    </div>
    <div class="navbar-right ">
      <ul class="nav navbar-nav m-n hidden-xs nav-user user">
        <li class="hidden-xs">
          <a href="#" class="dropdown-toggle lt" data-toggle="dropdown">
            <i class="icon-bell"></i>
            <span class="badge badge-sm up bg-danger count">2</span>
          </a>
          <section class="dropdown-menu aside-xl animated fadeInUp">
            <section class="panel bg-white">
              <div class="panel-heading b-light bg-light">
                <strong>You have <span class="count">2</span> notifications</strong>
              </div>
              <div class="list-group list-group-alt">
                <a href="#" class="media list-group-item">
                    <span class="pull-left thumb-sm">
                      <img src="images/a0png" alt="..." class="img-circle">
                    </span>
                  <span class="media-body block m-b-none">
                      Use awesome animate.css<br>
                      <small class="text-muted">10 minutes ago</small>
                    </span>
                </a>
                <a href="#" class="media list-group-item">
                    <span class="media-body block m-b-none">
                      1.0 initial released<br>
                      <small class="text-muted">1 hour ago</small>
                    </span>
                </a>
              </div>
              <div class="panel-footer text-sm">
                <a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
                <a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
              </div>
            </section>
          </section>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown">
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="images/a0png" alt="...">
              </span>
            John.Smith <b class="caret"></b>
          </a>
          <ul class="dropdown-menu animated fadeInRight">
            <li>
              <span class="arrow top"></span>
              <a href="#">Settings</a>
            </li>
            <li>
              <a href="profile.jsp">Profile</a>
            </li>
            <li>
              <a href="#">
                <span class="badge bg-danger pull-right">3</span>
                Notifications
              </a>
            </li>
            <li>
              <a href="docs.html">Help</a>
            </li>
            <li class="divider"></li>
            <li>
              <a href="modal.lockme.html" data-toggle="ajaxModal" >Logout</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </header>
  <section>
    <section class="hbox stretch">
      <!-- .aside -->
      <aside class="bg-black dk nav-xs aside hidden-print" id="nav">
        <section class="vbox">
          <section class="w-f-md scrollable">
            <div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px" data-railOpacity="0.2">
              <!-- nav -->
              <nav class="nav-primary hidden-xs">
                <ul class="nav bg clearfix">
                  <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                    Discover
                  </li>
                  <li>
                    <a href="index.html">
                      <i class="icon-disc icon text-success"></i>
                      <span class="font-bold">首页</span>
                    </a>
                  </li>
                  <li>
                    <a href="genres.html">
                      <i class="icon-user icon text-info"></i>
                      <span class="font-bold">歌手</span>
                    </a>
                  </li>
                  <li>
                    <a href="events.html">
                      <i class="icon-drawer icon text-primary-lter"></i>
                      <b class="badge bg-primary pull-right">6</b>
                      <span class="font-bold">专辑</span>
                    </a>
                  </li>
                  <li>
                    <a href="events.html">
                      <i class="icon-playlist icon text-primary-lter"></i>
                      <b class="badge bg-primary pull-right">6</b>
                      <span class="font-bold">分类歌单</span>
                    </a>
                  </li>
                  <li>
                    <a href="listen.html">
                      <i class="icon-music-tone-alt icon  text-info-dker"></i>
                      <span class="font-bold">听歌</span>
                    </a>
                  </li>
                  <li>
                    <a href="video.html" data-target="#content" data-el="#bjax-el" data-replace="true">
                      <i class="icon-social-youtube icon  text-primary"></i>
                      <span class="font-bold">MV</span>
                    </a>
                  </li>
                  <li class="m-b hidden-nav-xs"></li>
                </ul>
                <ul class="nav" data-ride="collapse">
                  <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                    Interface
                  </li>

                  <li >
                    <a href="#" class="auto">
                        <span class="pull-right text-muted">
                          <i class="fa fa-angle-left text"></i>
                          <i class="fa fa-angle-down text-active"></i>
                        </span>
                      <i class="icon-grid icon">
                      </i>
                      <span>Pages</span>
                    </a>
                    <ul class="nav dk text-sm">
                      <li >
                        <a href="profile.jsp" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Profile</span>
                        </a>
                      </li>
                      <li >
                        <a href="blog.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Blog</span>
                        </a>
                      </li>
                      <li >
                        <a href="gmap.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Google Map</span>
                        </a>
                      </li>
                      <li >
                        <a href="signin.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Signin</span>
                        </a>
                      </li>
                      <li >
                        <a href="signup.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Signup</span>
                        </a>
                      </li>
                    </ul>
                  </li>
                </ul>
                <ul class="nav text-sm">
                  <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                    <span class="pull-right"><a href="#"><i class="icon-plus i-lg"></i></a></span>
                    Playlist
                  </li>
                  <li>
                    <a href="#">
                      <i class="icon-music-tone icon"></i>
                      <span>Hip-Pop</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="icon-playlist icon text-success-lter"></i>
                      <b class="badge bg-success dker pull-right">9</b>
                      <span>Jazz</span>
                    </a>
                  </li>
                </ul>
              </nav>
              <!-- / nav -->
            </div>
          </section>

          <footer class="footer hidden-xs no-padder text-center-nav-xs">
            <div class="bg hidden-xs ">
              <div class="dropdown dropup wrapper-sm clearfix">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      <span class="thumb-sm avatar pull-left m-l-xs">                        
                        <img src="images/a3.png" class="dker" alt="...">
                        <i class="on b-black"></i>
                      </span>
                  <span class="hidden-nav-xs clear">
                        <span class="block m-l">
                          <strong class="font-bold text-lt">John.Smith</strong> 
                          <b class="caret"></b>
                        </span>
                        <span class="text-muted text-xs block m-l">Art Director</span>
                      </span>
                </a>
                <ul class="dropdown-menu animated fadeInRight aside text-left">
                  <li>
                    <span class="arrow bottom hidden-nav-xs"></span>
                    <a href="#">Settings</a>
                  </li>
                  <li>
                    <a href="profile.jsp">Profile</a>
                  </li>
                  <li>
                    <a href="#">
                      <span class="badge bg-danger pull-right">3</span>
                      Notifications
                    </a>
                  </li>
                  <li>
                    <a href="docs.html">Help</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="modal.lockme.html" data-toggle="ajaxModal" >Logout</a>
                  </li>
                </ul>
              </div>
            </div>            </footer>
        </section>
      </aside>
      <!-- /.aside -->
      <section id="content">
        <div id="click_show" style="clear: both;" >
          <ul style="margin-left: 25%;list-style: none">
            <li ><a href="#" class="album_area recommand" id="recommand_item">推荐</a></li>
            <li ><a href="#" class="album_area">内地</a></li>
            <li ><a href="#" class="album_area">港台</a></li>
            <li ><a href="#" class="album_area">欧美</a></li>
            <li ><a href="#" class="album_area">韩国</a></li>
            <li ><a href="#" class="album_area">日本</a></li>
          </ul>
        </div>
        <div id="_show" style="clear: both;display: none"  >
          <ul style="margin-left: 12%;list-style: none;">
            <li ><a href="#" class="album_area_choice choice_all" id="show_all">全部</a></li>
            <li ><a href="#" class="album_area_choice">流行</a></li>
            <li ><a href="#" class="album_area_choice">古典</a></li>
            <li ><a href="#" class="album_area_choice">爵士</a></li>
            <li ><a href="#" class="album_area_choice">摇滚</a></li>
            <li ><a href="#" class="album_area_choice">电子</a></li>
            <li ><a href="#" class="album_area_choice">拉丁</a></li>
            <li ><a href="#" class="album_area_choice">轻音乐</a></li>
            <li ><a href="#" class="album_area_choice">世界音乐</a></li>
            <li ><a href="#" class="album_area_choice">嘻哈</a></li>
            <li ><a href="#" class="album_area_choice">原声</a></li>
            <li ><a href="#" class="album_area_choice">乡村</a></li>
            <li ><a href="#" class="album_area_choice">舞曲</a></li>
            <li ><a href="#" class="album_area_choice">R&B</a></li>
            <li ><a href="#" class="album_area_choice">民谣</a></li>

          </ul>
        </div>
        <div style="clear: both" >
          <ul style="margin-left: 15%;list-style: none;">
            <li ><a  style="font-size:24px;color: black;float: left;">推荐</a></li>
          </ul>
        </div>
        <div id="hot_new_show" style="clear: right;margin-left:70%; margin-bottom: 3%;display: none" >
          <ul style="margin-left: 15%;list-style: none;">
            <li ><a  class="hot_new most-new" href="#"  id="most_new">最新</a></li>
            <li ><a  class="hot_new" href="#" >最热</a></li>
          </ul>
        </div>
        <section class="vbox" >

          <section class="scrollable">
            <div style="height: 1730px;width: 100%;">
            <div  class="pos-rlt animated fadeInUpBig" >
              <div class="item" style="width: 300px;height: 300px;margin-left:15%;margin-right:2%;float: left;">
                <div class="carousel slide auto" data-interval="3000">
                  <div class="carousel-inner">
                    <div class="item active">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.01</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
                        <p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
                      </div>
                      <a href="#"><img src="images/m20.jpg" alt="" class="img-full"></a>
                    </div>
                    <div class="item">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.02</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
                        <p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
                      </div>
                      <a href="#"><img src="images/m22.jpg" alt="" class="img-full"></a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item" style="width: 300px;height: 300px;margin-right:2%;float: left;">
                <div class="carousel slide auto" data-interval="3000">
                  <div class="carousel-inner">
                    <div class="item active">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.01</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
                        <p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
                      </div>
                      <a href="#"><img src="images/m20.jpg" alt="" class="img-full"></a>
                    </div>
                    <div class="item">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.02</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
                        <p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
                      </div>
                      <a href="#"><img src="images/m22.jpg" alt="" class="img-full"></a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item" style="width: 300px;height: 300px;margin-right:2%;float: left;">
                <div class="carousel slide auto" data-interval="3000">
                  <div class="carousel-inner">
                    <div class="item active">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.01</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
                        <p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
                      </div>
                      <a href="#"><img src="images/m20.jpg" alt="" class="img-full"></a>
                    </div>
                    <div class="item">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.02</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
                        <p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
                      </div>
                      <a href="#"><img src="images/m22.jpg" alt="" class="img-full"></a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item" style="width: 300px;height: 300px;float: left;margin-bottom: 2%">
                <div class="carousel slide auto" data-interval="3000">
                  <div class="carousel-inner">
                    <div class="item active">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.01</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
                        <p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
                      </div>
                      <a href="#"><img src="images/m20.jpg" alt="" class="img-full"></a>
                    </div>
                    <div class="item">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.02</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
                        <p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
                      </div>
                      <a href="#"><img src="images/m22.jpg" alt="" class="img-full"></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div  class="pos-rlt animated fadeInUpBig" >
              <div class="item" style="width: 300px;height: 300px;margin-left:15%;margin-right:2%;float: left;clear: both;">
                <div class="carousel slide auto" data-interval="3000">
                  <div class="carousel-inner">
                    <div class="item active">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.01</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
                        <p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
                      </div>
                      <a href="#"><img src="images/m20.jpg" alt="" class="img-full"></a>
                    </div>
                    <div class="item">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.02</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
                        <p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
                      </div>
                      <a href="#"><img src="images/m22.jpg" alt="" class="img-full"></a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item" style="width: 300px;height: 300px;margin-right:2%;float: left;margin-bottom: 2%">
                <div class="carousel slide auto" data-interval="3000">
                  <div class="carousel-inner">
                    <div class="item active">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.01</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
                        <p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
                      </div>
                      <a href="#"><img src="images/m20.jpg" alt="" class="img-full"></a>
                    </div>
                    <div class="item">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.02</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
                        <p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
                      </div>
                      <a href="#"><img src="images/m22.jpg" alt="" class="img-full"></a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item" style="width: 300px;height: 300px;margin-right:2%;float: left;">
                <div class="carousel slide auto" data-interval="3000">
                  <div class="carousel-inner">
                    <div class="item active">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.01</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
                        <p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
                      </div>
                      <a href="#"><img src="images/m20.jpg" alt="" class="img-full"></a>
                    </div>
                    <div class="item">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.02</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
                        <p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
                      </div>
                      <a href="#"><img src="images/m22.jpg" alt="" class="img-full"></a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item" style="width: 300px;height: 300px;float: left;">
                <div class="carousel slide auto" data-interval="3000">
                  <div class="carousel-inner">
                    <div class="item active">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.01</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
                        <p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
                      </div>
                      <a href="#"><img src="images/m20.jpg" alt="" class="img-full"></a>
                    </div>
                    <div class="item">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.02</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
                        <p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
                      </div>
                      <a href="#"><img src="images/m22.jpg" alt="" class="img-full"></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div  class="pos-rlt animated fadeInUpBig" >
              <div class="item" style="width: 300px;height: 300px;margin-left:15%;margin-right:2%;float: left;clear: both;">
                <div class="carousel slide auto" data-interval="3000">
                  <div class="carousel-inner">
                    <div class="item active">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.01</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
                        <p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
                      </div>
                      <a href="#"><img src="images/m20.jpg" alt="" class="img-full"></a>
                    </div>
                    <div class="item">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.02</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
                        <p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
                      </div>
                      <a href="#"><img src="images/m22.jpg" alt="" class="img-full"></a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item" style="width: 300px;height: 300px;margin-right:2%;float: left;">
                <div class="carousel slide auto" data-interval="3000">
                  <div class="carousel-inner">
                    <div class="item active">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.01</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
                        <p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
                      </div>
                      <a href="#"><img src="images/m20.jpg" alt="" class="img-full"></a>
                    </div>
                    <div class="item">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.02</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
                        <p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
                      </div>
                      <a href="#"><img src="images/m22.jpg" alt="" class="img-full"></a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item" style="width: 300px;height: 300px;margin-right:2%;float: left;">
                <div class="carousel slide auto" data-interval="3000">
                  <div class="carousel-inner">
                    <div class="item active">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.01</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
                        <p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
                      </div>
                      <a href="#"><img src="images/m20.jpg" alt="" class="img-full"></a>
                    </div>
                    <div class="item">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.02</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
                        <p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
                      </div>
                      <a href="#"><img src="images/m22.jpg" alt="" class="img-full"></a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item" style="width: 300px;height: 300px;float: left;">
                <div class="carousel slide auto" data-interval="3000">
                  <div class="carousel-inner">
                    <div class="item active">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.01</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
                        <p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
                      </div>
                      <a href="#"><img src="images/m20.jpg" alt="" class="img-full"></a>
                    </div>
                    <div class="item">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.02</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div class="bottom wrapper bg-info gd">
                        <div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
                        <p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
                      </div>
                      <a href="#"><img src="images/m22.jpg" alt="" class="img-full"></a>
                    </div>
                  </div>
                </div>
              </div>
              <div  class="pos-rlt animated fadeInUpBig" >
                <div class="item" style="width: 300px;height: 300px;margin-left:15%;margin-right:2%;float: left;clear: both;margin-top:1%;">
                  <div class="carousel slide auto" data-interval="3000">
                    <div class="carousel-inner">
                      <div class="item active">
                        <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                          <p class="text-white">N.01</p>
                          <div class="center text-center m-t-n">
                            <a href="#"><i class="icon-control-play i-2x"></i></a>
                          </div>
                        </div>
                        <div class="bottom wrapper bg-info gd">
                          <div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
                          <p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
                        </div>
                        <a href="#"><img src="images/m20.jpg" alt="" class="img-full"></a>
                      </div>
                      <div class="item">
                        <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                          <p class="text-white">N.02</p>
                          <div class="center text-center m-t-n">
                            <a href="#"><i class="icon-control-play i-2x"></i></a>
                          </div>
                        </div>
                        <div class="bottom wrapper bg-info gd">
                          <div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
                          <p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
                        </div>
                        <a href="#"><img src="images/m22.jpg" alt="" class="img-full"></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="item" style="width: 300px;height: 300px;margin-right:2%;float: left;margin-top:1%;">
                  <div class="carousel slide auto" data-interval="3000">
                    <div class="carousel-inner">
                      <div class="item active">
                        <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                          <p class="text-white">N.01</p>
                          <div class="center text-center m-t-n">
                            <a href="#"><i class="icon-control-play i-2x"></i></a>
                          </div>
                        </div>
                        <div class="bottom wrapper bg-info gd">
                          <div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
                          <p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
                        </div>
                        <a href="#"><img src="images/m20.jpg" alt="" class="img-full"></a>
                      </div>
                      <div class="item">
                        <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                          <p class="text-white">N.02</p>
                          <div class="center text-center m-t-n">
                            <a href="#"><i class="icon-control-play i-2x"></i></a>
                          </div>
                        </div>
                        <div class="bottom wrapper bg-info gd">
                          <div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
                          <p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
                        </div>
                        <a href="#"><img src="images/m22.jpg" alt="" class="img-full"></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="item" style="width: 300px;height: 300px;margin-right:2%;float: left;margin-top:1%;">
                  <div class="carousel slide auto" data-interval="3000">
                    <div class="carousel-inner">
                      <div class="item active">
                        <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                          <p class="text-white">N.01</p>
                          <div class="center text-center m-t-n">
                            <a href="#"><i class="icon-control-play i-2x"></i></a>
                          </div>
                        </div>
                        <div class="bottom wrapper bg-info gd">
                          <div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
                          <p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
                        </div>
                        <a href="#"><img src="images/m20.jpg" alt="" class="img-full"></a>
                      </div>
                      <div class="item">
                        <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                          <p class="text-white">N.02</p>
                          <div class="center text-center m-t-n">
                            <a href="#"><i class="icon-control-play i-2x"></i></a>
                          </div>
                        </div>
                        <div class="bottom wrapper bg-info gd">
                          <div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
                          <p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
                        </div>
                        <a href="#"><img src="images/m22.jpg" alt="" class="img-full"></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="item" style="width: 300px;height: 300px;float: left;margin-top:1%;">
                  <div class="carousel slide auto" data-interval="3000">
                    <div class="carousel-inner">
                      <div class="item active">
                        <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                          <p class="text-white">N.01</p>
                          <div class="center text-center m-t-n">
                            <a href="#"><i class="icon-control-play i-2x"></i></a>
                          </div>
                        </div>
                        <div class="bottom wrapper bg-info gd">
                          <div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
                          <p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
                        </div>
                        <a href="#"><img src="images/m20.jpg" alt="" class="img-full"></a>
                      </div>
                      <div class="item">
                        <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                          <p class="text-white">N.02</p>
                          <div class="center text-center m-t-n">
                            <a href="#"><i class="icon-control-play i-2x"></i></a>
                          </div>
                        </div>
                        <div class="bottom wrapper bg-info gd">
                          <div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
                          <p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
                        </div>
                        <a href="#"><img src="images/m22.jpg" alt="" class="img-full"></a>
                      </div>
                    </div>
                  </div>
                </div>
                </div>
                </div>
            <div align="center" style="clear: both;" >
              <ul class="pagination pagination">
                <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
              </ul>
            </div>

              <div style="background-color: #a5a5a5;padding: 1% 1%;">
                <div class="footer_download" align="center">
                  <h4 class="footer_tit">友情链接</h4>
                  <a href="https://y.qq.com/" >QQ音乐：https://y.qq.com/</a>
                  <a href="http://www.kugou.com/" >酷狗音乐：http://www.kugou.com/</a>
                  <a href="//y.qq.com/download/" >网易音乐：https://music.163.com/</a>
                  <a href="https://www.xiami.com/" >虾米音乐：https://www.xiami.com/</a>
                  <a href="" >千千静听: http://music.taihe.com/</a>
                  </ul>
                </div>
                <div align="center" style="padding-top:1%">
                  <a href="">关于魔音|</a>
                  <a href="">About MonsterMusic|</a>
                  <a href="">服务条款|</a>
                  <a href="">用户服务协议|</a>
                  <a href="">隐私政策|</a>
                  <a href="">权利声明|</a>
                  <a href="">广告服务|</a>
                  <a href="">客服中心|</a>
                  <a href="">魔音招聘|</a>
                  <a href="">网站导航</a>
                </div>
                <div align="center">
                  Copyright @ 2018 - 2019 MonsterMusic All Rights Reserved.
                </div>
                <div align="center">
                  <a >魔音公司  </a>
                  <a href="">  版权所有</a>
                  <a href="">  魔音网络文化经营许可证</a>
                </div>
              </div>
            </div>
          </section>
        </section>
        </div>
        </div>
        <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
      </section>
    </section>
  </section>
</section>

<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<script src="js/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/masonry/tiles.min.js"></script>
<script src="js/masonry/demo.js"></script>
<script src="js/app.plugin.js"></script>
<script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jPlayer/add-on/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="js/jPlayer/demo.js"></script>
<script src="jquery.min.js"></script>
//选中背景变色
<script >
    $("#click_show ul li").click(function(e){
        e.preventDefault();
        $(this).addClass('album_area_bg');
        $(this).siblings().removeClass('album_area_bg');
    });
</script>
//隐藏选项添加点击样式
<script >
    $("#_show ul li").click(function(e){
        e.preventDefault();
        $(this).addClass('album_area_choice_bg');
        $(this).siblings().removeClass('album_area_choice_bg');
    });
</script>
//点击除了第一个显示隐藏选项
<script type="text/javascript">
    jQuery (function ($) {
        $ ("#click_show ul li:not(:first-child)").click (function (){
            $ ("#_show").show();
            $("#hot_new_show").show();
        });
    });
</script>
//点击第一个隐藏下面选项
<script type="text/javascript">
    jQuery (function ($) {
        $ ("#click_show ul li:first-child").click (function (){
            $ ("#_show").hide();
            $("#hot_new_show").hide();
        });
    });
</script>
//点击其他移除第一个样式
<script type="text/javascript">
    jQuery (function ($) {
        $ ("#click_show ul li:not(:first-child)").click (function (){
            $("#recommand_item").removeClass('recommand');
        });
    });
</script>
//隐藏选项点击除了第一个移除第一个样式
<script type="text/javascript">
    jQuery (function ($) {
        $ ("#_show ul li:not(:first-child)").click (function (){
            $("#show_all").removeClass('choice_all');
        });
    });
</script>
<script >
    $("#hot_new_show ul li").click(function(e){
        e.preventDefault();
        $(this).addClass('hot_new_bg');
        $(this).siblings().removeClass('hot_new_bg');
    });
</script>
//最新/最热切换
<script type="text/javascript">
    jQuery (function ($) {
        $ (".hot_new:last-child").click (function (){
            $("#most_new").removeClass('most-new');
        });
    });
</script>

</body>
</html>